<template>
  <div>
    <div ref="wangEditor"></div>
  </div>
</template>

<script>
  import {getToken} from "@/utils/auth";
  import {
    uploadImage
  } from "@/api/gwoper/news";
  import E from "wangeditor"
  export default {
    name: "WangEditor",
    props: {
      editValue: [String, Array, Object, Number, Boolean],
      isEdit: Boolean
    },
    data() {
      return {
        editor: "",
        isEditor: this.isEdit,
        imgUrlAction:
          process.env.VUE_APP_BASE_API + "/operation-center/information/uploadImageForWangEditor", // 上传接口
        headers: {
          Authorization: "Bearer " + getToken()
        },
      }
    },
    watch: {
      editValue(val) {
        this.editor.txt.html(val);
      },
      isEdit() {
        this.isEdits = this.isEdit;
        console.log(this.isEdits)
        if (this.isEdit) {
          // 启用
          this.editor.enable();
        } else {
          // 禁用
          this.editor.disable();
        }
      },
    },
    mounted() {
      let content = ""
      this.editor = new E(this.$refs.wangEditor)
      // 配置颜色（文字颜色、背景色）
      this.editor.config.colors = [
        '#000000',
        '#eeece0',
        '#1c487f',
        '#4d80bf'
      ]
      // 配置字体
      // this.editor.config.fontNames = [
      //   '黑体',
      //   '仿宋',
      //   '楷体',
      //   '标楷体',
      //   '华文仿宋',
      //   '华文楷体',
      //   '宋体',
      //   '微软雅黑',
      //   'Arial',
      //   'Tahoma',
      //   'Verdana',
      //   'Times New Roman',
      //   'Courier New',
      // ]

      // 配置 server 接口地址
      // editor.config.uploadImgServer = this.imgUrlAction
      // this.editor.config.uploadImgHeaders = this.headers
      // this.editor.config.uploadFileName = 'multipartFile'
      this.editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']
      // 上传图片
      this.editor.config.customUploadImg = function (resultFiles, insertImgFn) {
        // resultFiles 是 input 中选中的文件列表
        // insertImgFn 是获取图片 url 后，插入到编辑器的方法
        console.log(resultFiles)
        resultFiles.forEach((item) => {
          let fd = new FormData();
          fd.append('multipartFile', item); // 上传的文件： 键名，键值
          // 以下是上传图片的接口，视情况而更改就可以啦                                                     teachService.FileUploadInTencent(fd).then((data) => {
          uploadImage(fd).then(res => {
            console.log(res)
            // 上传代码返回结果之后，将图片插入到编辑器中
            insertImgFn(res.data[0].url)
          })
        })
      }
      // 上传视频
      this.editor.config.customUploadVideo = function (resultFiles, insertVideoFn) {
        // resultFiles 是 input 中选中的文件列表
        // insertVideoFn 是获取视频 url 后，插入到编辑器的方法
        console.log(resultFiles)
        resultFiles.forEach((item) => {
          let fd = new FormData();
          fd.append('multipartFile', item); // 上传的文件： 键名，键值
          // 以下是上传图片的接口，视情况而更改就可以啦                                                     teachService.FileUploadInTencent(fd).then((data) => {
          uploadImage(fd).then(res => {
            console.log(res)
            // 上传视频，返回结果，将视频地址插入到编辑器中
            insertVideoFn(res.data[0].url)
          })
        })
      }
      // 配置 onchange 回调函数
      this.editor.config.onchange = function (newHtml) {
        console.log('change 之后最新的 html', newHtml)
        if (newHtml) {
          this.$emit('changeEditor', newHtml);
        }
      }.bind(this)

      this.editor.create()
      if (this.isEdit) {
        // 启用
        this.editor.enable();
      } else {
        // 禁用
        this.editor.disable();
      }
    }
  }
</script>

<style scoped>

</style>
